<template>
	<default-header-page-layout :full="false" ref="page" title="空托出库" base-background-color="#f0f8ff"
		background-color="#fff">
		<view class="page-frame with-action-user-row" :style="{height:pageBodyHeight+'px'}" v-if="pageBodyHeight">
			<action-user-row />
			<view class="with-action-user-row-page-content">
				<view class="scan-input-form-item-compontent">
					<view class="p-form-label">空托数量：</view>
					<view class="input-row">
						<!-- <view class="mask" @tap.stop="" v-if="disabled"></view> -->
						<view class="input-view">
							<u-input clearable border="none" type="number" placeholder="请输入空托数量" v-model="form.qty" />
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
		
		<template v-slot:footer>
			<view class="bottom-btns-row">
				<template>
					<div class="btn-frame">
						<u-button @click="containerOut" :disabled="!Boolean(form.qty)||form.qty<=0||form.qty%1 != 0" size="large" text="空托出库" type="primary"></u-button>
					</div>
					
				</template>
			</view>
		</template>
	</default-header-page-layout>
</template>
<script>
	import DefaultHeaderPageLayout from '@/components/DefaultHeaderPageLayout.vue'
	import ActionUserRow from '@/components/ActionUserRow.vue'
	import {PdaContainerOut} from '@/api/slicingOff.js'
	import {
		$alert,
		$successInfo
	} from '@/static/js/utils/index.js'
	let initInterVal = null;
	export default {
		name: 'slicingOffPage',
		components: {
			DefaultHeaderPageLayout,
			ActionUserRow
		},
		data() {
			return {
				pageBodyHeight: 0,
				form:{}
			}
		},
		methods: {
			// 空托出库
			async containerOut(){
				try{
					await PdaContainerOut({qty:this.form.qty})
					$successInfo('出库成功')
					this.form={}
				}catch(e){
					//TODO handle the exception
					console.log(e);
				}
			},
			/* 页面初始化获取页面body高度的定时器 */
			startInitInterval(callback) {
				initInterVal = setInterval(() => {
					if (this.pageBodyHeight) {
						this.clearInitInterval()
						callback && callback()
					} else {
						this.pageBodyHeight = this.$refs.page.getBodyHeight()
					}
				}, 200)
			},
			/* 清除定时器 */
			clearInitInterval() {
				try {
					clearInterval(initInterVal)
					initInterVal = null
				} catch (e) {
					//TODO handle the exception
				}
			},
		},
		onReady() {
			this.startInitInterval(() => {
				/* 页面初始化后需要执行的代码在这边调用 */
			})
		},
		onUnload() {
			this.clearInitInterval()
		}
	}
</script>
<style lang="scss" scoped>
	.bottom-btns-row {
		display: flex;
		padding: 10rpx 20rpx;
		background-color: #fff;

		.btn-frame {
			width: 1%;
			box-sizing: border-box;
			flex-grow: 1;
		}

		.divider {
			width: 20rpx;
			flex-shrink: 0;
		}
	}

	.scan-input-form-item-compontent {
		width: 100%;

		.p-form-label {
			font-size: 32rpx;
			color: $u-tips-color;
			padding-bottom: 12rpx;
			padding-left: 20rpx;
		}

		.input-row {
			width: 100%;
			height: 90rpx;
			overflow: hidden;
			background-color: $uni-bg-color;
			display: flex;
			align-items: center;
			position: relative;

			.scan-view,
			.btn-view {
				flex-shrink: 0;
			}

			.scan-view {
				display: flex;
				align-items: center;
				justify-content: center;
				padding-right: 10rpx;
			}

			.input-view {
				flex-grow: 1;
				padding-left: 20rpx;
			}

			.btn-view {
				width: 70rpx;
				height: 100%;
				padding: 20rpx;
				padding-left: 0rpx;
				box-sizing: border-box;

				.search-btn {
					height: 100%;
					width: 100%;
					border-radius: 8rpx;
					background: linear-gradient(157.342820970935deg, rgba(194, 128, 255, 1) -20%, rgba(194, 128, 255, 1) -19%, rgba(132, 0, 255, 1) 119%);
					display: flex;
					align-items: center;
					justify-content: center;
					color: $uni-bg-color;
					font-size: 26rpx;
				}
			}

			&>.mask {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 100;
				background-color: #000;
				opacity: 0.25;
			}
		}

		.msg-row {
			padding: 6rpx 20rpx 0 20rpx;
			line-height: 1.3;
			font-size: 24rpx;
			color: $u-error;

			&.info-type {
				color: $color-blue;
			}
		}
	}
</style>